<template>
  <div class="app-container">
    <el-form ref="queryParams" inline size="mini" :model="queryParams">
      <el-form-item label="岗位编码">
        <el-input v-model.trim="queryParams.post_code" />
      </el-form-item>
      <el-form-item label="岗位名称">
        <el-input v-model.trim="queryParams.post_name" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryParams.status" clearable>
          <el-option label="正常" :value="0" />
          <el-option label="禁用" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="getTableDataByFirst">查询</el-button>
        <el-button size="mini" @click="onResetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10">
      <el-col :span="2">
        <el-button
          type="primary"
          plain
          size="mini"
          icon="el-icon-plus"
          @click="onOpenAddPostModal"
        >新增</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="tableData" max-height="500">
      <el-table-column type="selection" align="center" />
      <el-table-column type="index" label="序号" :index="indexMethod" />
      <template v-for="(item, index) in tableProp">
        <el-table-column :key="index" v-bind="item" />
      </template>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="onOpenModifyPostModal(scope.$index, scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="onDeletePost(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination :total="total" :limit="limit" :page="page" @pagination="onPagination" />

    <!--添加或修改岗位信息-->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="postForm" :model="postForm" :rules="postFormRules" label-width="80px">
        <el-form-item prop="name" label="岗位名称">
          <el-input v-model="postForm.name" />
        </el-form-item>
        <el-form-item prop="code" label="岗位编码">
          <el-input v-model="postForm.code" :disabled="Boolean(postForm.id)" />
        </el-form-item>
        <el-form-item label="岗位顺序">
          <el-input-number v-model="postForm.sort" :min="1" />
        </el-form-item>
        <el-form-item label="岗位状态">
          <el-radio-group v-model="postForm.status">
            <el-radio :label="0">正常</el-radio>
            <el-radio :label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="postForm.remark" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="open = false">取 消</el-button>
        <el-button size="small" type="primary" @click="onAddOrModifyPost">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import PostService from '@/serverice/PostService'
// 创建岗位逻辑对象
const postService = new PostService()

// 引入组件
import Pagination from '@/components/Pagination'

export default {
  name: 'Post',
  components: { Pagination },
  data() {
    return {
      queryParams: {
        post_name: undefined,
        post_code: undefined,
        status: undefined
      },
      title: '',
      open: false,
      postForm: {},
      postFormRules: {
        name: [
          { required: true, message: '岗位名称不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '岗位编码不能为空', trigger: 'blur' }
        ]
      },
      loading: false,

      // 表格头部属性
      tableProp: [
        { prop: 'name', label: '岗位名称', align: 'center' },
        { prop: 'code', label: '岗位编码', align: 'center' },
        { prop: 'sort', label: '顺序', align: 'center' }
      ],
      // 表格数据
      tableData: [],
      total: 0,
      limit: 20,
      page: 1
    }
  },
  created() {
    this.getTableDataByFirst()
  },
  methods: {
    indexMethod(index) {
      return (index + 1) + ((this.page - 1) * this.limit)
    },
    onResetQuery() {
      this.queryParams = {
        post_name: undefined,
        post_code: undefined,
        status: undefined
      }
      this.$resetForm('queryParams')
      this.getTableDataByFirst()
    },
    /**
     * 重置岗位添加或修改表单
     */
    resetPostForm() {
      this.postForm = {
        id: undefined,
        name: undefined,
        code: undefined,
        remark: undefined,
        status: 0,
        sort: 1
      }
      this.$resetForm('postForm')
    },

    /**
     * 打开新增表单弹窗
     */
    onOpenAddPostModal() {
      this.resetPostForm()
      this.title = '新增岗位'
      this.open = true
    },

    /**
     * 打开修改表单弹窗
     * @param index 当前岗位数组索引
     * @param post 当前岗位信息
     */
    onOpenModifyPostModal(index, post) {
      this.resetPostForm()
      this.postForm = { ...post, status: +post.status }
      this.title = '修改岗位'
      this.open = true
    },

    /**
     * 新增或修改岗位信息
     */
    onAddOrModifyPost() {
      this.$refs.postForm.validate((valid) => {
        if (valid) {
          if (this.postForm.id === undefined) { // 新增岗位
            postService.addPost(this.postForm).then((res) => {
              if (res && res.code === 0) {
                this.$message.success(res.msg)
                this.open = false
                this.getTableDataByFirst()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else { // 修改岗位
            postService.modifyPost(this.postForm).then((res) => {
              if (res && res.code === 0) {
                this.$message.success(res.msg)
                this.open = false
                this.getTableDataByFirst()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        }
      })
    },

    /**
     * 分页数据改变
     */
    onPagination({ page, limit }) {
      if (this.limit !== limit) {
        this.limit = limit
        this.getTableDataByFirst()
      } else {
        this.page = page
        this.onGetTableData()
      }
    },

    /**
     * 获取首页查询
     */
    getTableDataByFirst() {
      this.page = 1
      this.onGetTableData()
    },

    /**
     * 获取岗位列表
     */
    onGetTableData() {
      this.loading = true
      const params = {
        ...this.queryParams,
        page_num: this.page,
        page_size: this.limit
      }
      postService.getPostList(params).then(({ data }) => {
        this.loading = false
        this.tableData = data.rows
        this.total = data.count
      }).catch(() => {
        this.loading = false
      })
    },

    onDeletePost(index, post) {
      this.$confirm('确认删除当前岗位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        postService.deletePost(post).then((res) => {
          if (res && res.code === 0) {
            this.getTableDataByFirst()
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
